.home-page {
	height: 100vh;
	overflow: hidden;
	background: #f6f6f6;
	&-scroll {
		height: 100%;
	}
	.swiper {
		&-item {
			background: red;
			height: 100%;
			width: 100%;
		}
	}

	.filter {
		display: flex;
		align-items: center;
		background: #FFF;
		margin-bottom: 40px;
		position: sticky;
		top: 0;
		z-index: 2;
		&-item {
			text-align: center;
			height: 60px;
			line-height: 60px;
			position: relative;
			padding: 16px 32px;
			color: #c4c3c8;
		}
		.filter-item.active {
			color: #333;
		}
		.filter-item.active::after {
			content: '';
			height: 8px;
			border-radius: 4px;
			width: 50px;
			background: #8959e2;
			position: absolute;
			display: block;
			left: 50%;
			transform: translateX(-50%);
			bottom: 0px;
		}
	}

	.card-list {
		&-item {
			margin: 20px;
			position: relative;
		}

		&-item-avatar {
			height: 900px;
			width: 100%;
			margin-right: 20px;
			border-radius: 30px;
		}

		&-item-content {
			position: absolute;
			right: 0;
			bottom: 0;
			left: 0;
			padding: 24px;
		}
	}

	.at-activity-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    height: 40px;
    margin: 10px;
	}

	.header {
		color: #FFF;
		font-size: 38px;
		display: flex;
		font-weight: bolder;
		&-item {
			margin-right: 20px;
			margin-bottom: 16px;
		}
	}

	.content {
		color: #FFF;
		font-size: 30px;
		display: flex;
		&-item {
			margin-right: 20px;
			margin-bottom: 20px;
		}
	}

	.empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 200px;
		&-img {
			width: 400px;
			height: 400px;
		}
		&-text {
			color: #ccc;
		}
	}
}